<template>
    <div class="shop">
        <div class="sp">
            <h1>欢迎选购婴儿宝宝的日常用品</h1>
            <ul>
                <li v-for="item in goodslist" :key="item._id"
                @click="goDetail(item.id)">
                    <img :src="item.img"  alt="">
                    <h3>{{item.title}}</h3>
                    <h4>{{item.price}}</h4>
                    
                </li>
                
            </ul>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            
            goodslist:[]
        }
    },
    created(){
        this.getGoodslist()
    },
    methods:{
        getGoodslist(){
            this.$http.get("/shop").then(result=>{
                this.goodslist=this.goodslist.concat(result.body.msg)
                console.log(result.body.msg);
                
            })
        },
    goDetail(id){
        this.$router.push({ name:"bbinfo",params:{ id:id}})
    }
    }
}
</script>
<style lang="scss">
.shop{
    height: 2000px;
    background: url(../../images/hui.jpg);
}
.sp{
    width: 1400px;
    margin: 0 auto;
    h1{
        margin-left: 500px;
        margin-bottom: 20px;
        font-weight: 500;
    }
    img{
        height: 200px;
        width: 200px;
    }
    h4{
        color: #f10215;
        font-size: 18px;
    }
    .bt{
        width: 180px;
        height: 30px;
        border: 1px solid skyblue;
        background-color: skyblue;
        border-radius: 4px;
        margin-left: 5px;
    }
    li{
        float: left;
        margin-right: 10px;
        margin-bottom: 20px;
    }

}

</style>
